import React from 'react';
import "./index.less"
import {
    SearchBar,
    InputItem,
    List,
    WingBlank,
    Carousel,
    Stepper,
    Button,
    Modal
} from 'antd-mobile';
import { getGoods} from '@/api/classify';
import TabBarExample from 'components/tabBar'
import TopBarExample from 'components/topBar'
import GoPop from './components/GoPop'
import qs from 'qs'


export default class ClassifyGoodDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            code: '',
            shopCar: false,
            goodData: {},
            goodInfo: new Array(20).fill(0),
            buyPop: false,
            goNum:1,
        };
    }

    componentDidMount() {
        const { search } = this.props.location;
        const {code} = qs.parse(search.slice(1));
        if (code) {
            getGoods(
                {
                    code: code,
                    equipment_type: 2
                }
            ).then(res => {
                this.setState({
                    goodData : res.data,
                })
            });
        }
        // this.props.location.state ? this.setState({
        //     code: this.props.location.state.code,
        //     shopCar: this.props.location.state.shopCar
        // }, () => {
        //     getGoods(
        //         {
        //             code: this.state.code,
        //             equipment_type: 2
        //         }
        //     ).then(res => {
        //         console.log(res)
        //         this.setState({
        //             data : res.data
        //         })
        //     });
        // }): null;
    }

    onChange = (value) => {
        this.setState({ value });
    };


    // 取消购买弹窗
    changePop = () => {
        this.setState({
            buyPop: false
        });
    };

    // 去购物车
    goShopCar = () => {
        this.props.history.push({pathname:'/shopCart/', state:{id:123}})
    };

    // 立即购买
    nowPay = () => {
        this.props.history.push({pathname:'/classify/good/payOrder/', state:{id:123}})
    };

    // 返回上一页
    addVConsolePackage = () => {
        this.props.history.goBack()
    };

    render() {
        return (
            <div className="classifyGoodDetail">
                <TopBarExample title={'商品详情'} autoBack={this.addVConsolePackage} showBack={true}></TopBarExample>
                <div className="img-list">
                     {/*<WingBlank>*/}
                     {/*    <Carousel*/}
                     {/*        autoplay={true}*/}
                     {/*       infinite*/}
                     {/*       autoplayInterval={2000}*/}
                     {/*   >*/}
                            {[this.state.goodData.slider].map((val, index) => {
                                return <img
                                    key={index}
                                    src={val}
                                    alt=""
                                    style={{ width: '100%', height: '100%'}}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                    }}
                                />
                            })}
                        {/*</Carousel>*/}
                    {/*</WingBlank>*/}
                </div>
                <div className="price-info">
                    <div className="left">
                        <span>{this.state.goodData.price_selling}</span>
                        {/*<span style={{opacity: 0.6}}>|</span>*/}
                        {/*<span style={{ fontSize: "12px",  opacity: 0.6}}>限购2份</span>*/}
                    </div>
                </div>
                <div className="title-info">
                    <div className="left">
                        <div style={{ fontWeight: "600" }}>{this.state.goodData.name}</div>
                        {/*<div style={{ fontSize: "14px", color: "#b6b6b6"}}>新鲜直供 颗颗精选</div>*/}
                    </div>
                    <div className="right">
                        收藏
                    </div>
                </div>
                <div className="ps-info">
                    <ul className="ul">
                        <li className="li" style={{marginTop: '10px'}}>
                            <div className="li-item">
                                <div style={{ color: "#b2b2b2"}}>服务：</div>
                                <div>支持无理由退换货工厂直发</div>
                            </div>
                        </li>
                        <li className="li" style={{marginTop: '10px'}}>
                            <div className="li-item">
                                <div style={{ color: "#b2b2b2"}}>快递：</div>
                                <div>工厂直发到自提点<br/>顾客凭提货码去自己的自提点提货</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div className="detail-info">
                    <div className="title">商品信息</div>
                    <div className="content" dangerouslySetInnerHTML={{__html: this.state.goodData.content}}>
                        {/*{*/}
                        {/*    this.state.goodInfo.map((res, index) => {*/}
                        {/*        return <div className="detail-info-item" key={index}>*/}
                        {/*            <div className="detail-info-item-l">品牌</div>*/}
                        {/*            <div className="detail-info-item-r">品牌名称</div>*/}
                        {/*        </div>*/}
                        {/*    })*/}
                        {/*}*/}
                    </div>
                </div>
                {!this.state.shopCar && <div className="foot">
                    <div className="foot-tab">
                        {/*<div className="item">*/}
                        {/*    <img*/}
                        {/*        src={require("../../../assets/img/home/shop-logo.png")}*/}
                        {/*        alt=""*/}
                        {/*        style={{ width: '20px', height: '20px'}}*/}
                        {/*        onLoad={() => {*/}
                        {/*            // fire window resize event to change height*/}
                        {/*        }}*/}
                        {/*    />*/}
                        {/*    <span style={{ fontSize: '14px', color: 'red'}}>客服</span>*/}
                        {/*</div>*/}
                        <div className="item" onClick={this.goShopCar}>
                            <img
                                src={require("../../../assets/icon/tab-shopCart.png")}
                                alt=""
                                style={{ width: '20px', height: '20px'}}
                                onLoad={() => {
                                    // fire window resize event to change height
                                }}
                            />
                            <span style={{ fontSize: '14px'}}>购物车</span>
                        </div>
                    </div>
                    <div className="foot-button">
                        <Button type="primary" inline style={{ marginRight: '4px', backgroundColor: '#50db93', color: 'white', border: 'none'}}>加入购物车</Button>
                        <Button inline style={{ marginRight: '4px' }} onClick={() => {this.setState({buyPop: true})}}>立即购买</Button>
                    </div>
                </div>}
                {this.state.buyPop && <GoPop goodData={this.state.goodData} cancel={this.changePop}></GoPop> }
                {/*<Modal*/}
                {/*    popup*/}
                {/*    visible={this.state.buyPop}*/}
                {/*    onClose={() => {this.setState({buyPop: false})}}*/}
                {/*    animationType="slide-up"*/}
                {/*>*/}
                {/*    <div className="goPop">*/}
                {/*        <div className="goPop-top">*/}
                {/*            <div className="goPop-top-img" onClick={this.goShopCar}>*/}
                {/*                <img*/}
                {/*                    src={require("../../../assets/icon/tab-shopCart.png")}*/}
                {/*                    alt=""*/}
                {/*                    style={{ width: '50px', height: '50px'}}*/}
                {/*                    onLoad={() => {*/}
                {/*                        // fire window resize event to change height*/}
                {/*                    }}*/}
                {/*                />*/}
                {/*            </div>*/}
                {/*            <div className="goPop-top-r">*/}
                {/*                <div className="goPop-top-r-title">*/}
                {/*                    物品*/}
                {/*                </div>*/}
                {/*                <div className="goPop-top-r-price">*/}
                {/*                    20*/}
                {/*                </div>*/}
                {/*            </div>*/}
                {/*        </div>*/}
                {/*        <div className="goPop-content">*/}
                {/*            <span>数量：</span>*/}
                {/*            <Stepper*/}
                {/*                showNumber*/}
                {/*                min={1}*/}
                {/*                value={this.state.goNum}*/}
                {/*                onChange={this.changeNum}*/}
                {/*            />*/}
                {/*        </div>*/}
                {/*        <div className="goPop-foot" onClick={() => {this.setState({buyPop: true})}}>立即购买</div>*/}
                {/*    </div>*/}
                {/*</Modal>*/}
                {/*/!*<TabBarExample selectedTab={'classify'}></TabBarExample>*!/*/}
            </div>
        );
    }
}

